<template>
	<view class="wrap">
		<view class="tips">
			<text>请输入</text>
			<text>{{telSecret}}</text>
			<text>收到的短信验证码</text>
		</view>
		<view class="item bw h100 app_flex-aic">
			<view class="item-label" style="width: 126rpx;">验证码</view>
			<view class="item-content app_flex1">
				<input v-model="code" type="number" placeholder="请输入手机验证码" placeholder-class="app_phc">
			</view>
			<view class="item-R codeTap" :class="{active: !getCodeFlag}" @click="sendCode()">{{tips}}</view>
		</view>
		<view class="title">设置新密码</view>
		<view class="item bw h100 app_flex-aic">
			<view class="item-label">新密码</view>
			<view class="item-content app_flex1">
				<input v-model="pwd" type="password" placeholder="请设置新密码" placeholder-class="app_phc">
			</view>
		</view>
		<view class="item bw h100 app_flex-aic">
			<view class="item-label">确认密码</view>
			<view class="item-content app_flex1">
				<input v-model="confirmPwd" type="password" placeholder="请再次输入密码确认" placeholder-class="app_phc">
			</view>
		</view>
		<view class="btn">
			<g-btn title="确定" @click="onConfirmTap"></g-btn>
		</view>

		<u-popup v-model="showSuccPop" mode="center" :mask="false" border-radius="10">
			<view class="succPop fw app_flex-aicjcc">
				<view>修改成功</view>
				<view>重新登录账号</view>
			</view>
		</u-popup>

		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" @end="getCodeFlag = false"
			@start="getCodeFlag = true"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSuccPop: false,
				seconds: 10,
				tips: '',
				getCodeFlag: false,
				tel: '',
				telSecret: '',
				code: '',
				pwd: '',
				confirmPwd: ''
			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo').then(userInfo => {
				console.log(userInfo);
				this.tel = userInfo.tel
				this.telSecret = userInfo.tel.slice(0, 3) + '****' + userInfo.tel.slice(7)
			})
		},
		methods: {
			sendCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$g_api.commonSendCode({
						tel: this.tel,
					}).then(({
						data
					}) => {
						uni.hideLoading();
						uni.showToast({
							title: '验证码已发送'
						})
						this.$refs.uCode.start();
					})
				}
			},
			checkCode() {
				return this.$g_api.commonVerifyCode({
					checkNum: this.code,
					tel: this.tel
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async checkParams() {
				if (!this.code) return Promise.reject('请输入验证码')
				if (!this.pwd) return Promise.reject('请输入密码')
				if (!this.confirmPwd) return Promise.reject('请再次输入密码')
				if (this.pwd !== this.confirmPwd) return Promise.reject('密码不一致，请重新输入密码')
				return Promise.resolve({
					checkNum: this.code,
					tel: this.tel,
					newPassword: this.pwd,
					resPassword: this.confirmPwd
				})
			},
			async onConfirmTap() {
				try {
					const params = await this.checkParams()
					await this.checkCode()
					await this.$g_api.subscriberForgot(params)
					this.showSuccPop = true
					setTimeout(() => {
						this.showSuccPop = false
						this.$g_util.logout()
					}, 1500)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.toString(),
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-mode-center-box {
		background-color: rgba(0, 0, 0, .6) !important;
	}

	.tips {
		line-height: 90rpx;
		padding: 0 30rpx;

		text {
			font-size: 26rpx;

			&:nth-child(2) {
				color: $g-main-color;
			}
		}
	}

	.item {
		padding: 0 30rpx;
		font-size: 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-label {
		width: 156rpx;
	}

	.item-R {
		width: 160rpx;
		text-align: right;
	}

	.codeTap {
		color: #999;

		&.active {
			color: $g-main-color;
		}
	}

	.btn {
		margin-top: 150rpx;
	}

	.title {
		padding: 0 30rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.succPop {
		width: 300rpx;
		height: 140rpx;
		flex-direction: column;
	}
</style>
